Lanzo una pregunta al aire ¿Qué perdemos si nos copian?
Me preguntaba Viviana sobre un código para añadir en las entradas de forma que dicho código no es visible a las visitas pero al copiar el contenido se muestre en el lugar que será añadido.
Sobre ese tema o similar escribí hace tiempo, pero no localizo esa entrada, recuerdo vagamente que lo que se añadía era un enlace pero por algún motivo no resultaba bien.
Mi aportación sobre este tema es que no hay nada efectivo o con garantías para evitar que nos copien. Si hay trucos o ideas que aunque no lo impiden consiguen que los que se apropian de lo ajeno se lleven consigo también los enlaces incluidos en ese post.
Como todos sabemos enlazar otros sitios es beneficioso porque aportamos información más amplia sobre el tema que estamos tratando y es un gesto de reconocimiento hacia la persona que pone a nuestra disposición esa información. También es beneficioso enlazarnos nosotros mismos, no confundamos eso con la vanidad ni pensemos que se trata de atrapar a las visitas.
Cuando en una entrada hacemos mención a ese otro post que escribimos un día, o para no extendernos enlazamos una entrada donde encontraremos más detalles de un mismo tema estamos brindando información extra pero, al mismo tiempo estamos añadiendo unos enlaces y eso enlaces se mostrarán si el post o la entrada es copiado y añadido en otro lugar.
Otra sistema que se usa para copiar es desde los feeds, ahí también podemos añadir un enlace o texto extra y que se lo lleven como regalito al copiar.
Ingresamos en Configuración y marcamos la pestaña Feed del sitio veremos en primer lugar "Permitir feeds del blog" marcaremos a "Completo"
En tercer lugar aparece "Pie de página del feed de entradas" y un espacio a la derecha donde incluiremos lo que deseamos aparezca al final de cada post, puede ser un enlace al blog o una frase que nos identifique.
Seguidamente vamos a Configuración/Archivo y en "Habilitar las páginas de entrada" marcamos "Sí" ¿Qué hemos conseguido? conseguimos, que si alguien copia nuestras entradas también copie lo que añadimos en nuestra configuración.
Lanzo una pregunta al aire ¿Qué perdemos si nos copian?
Problemas con la plantilla en Edición de HTML |
|
▼ |
Desde hace dos días Blogger está presentando problemas en la plantilla Edición de HTML, dichos problemas impiden expandir la plantilla, utilizar el vista previa y guardar los cambios realizados.
Esta misma tarde parecía que todo estaba en orden pero al parecer ha sido cosa de unos momentos.
En el foro de ayuda Blogger se habla de el tema y derivan a "Problemas conocidos" donde nos informan que ya están investigando y cuando se solucione el problema lo harán saber, aunque imagino que para entonces ya nos habremos dado cuenta.
Así están las cosas, no es problema de vuestro blog, como en otras ocasiones la única pócima mágica es la paciencia.
Añadir vídeos de You Tube desde Blogger |
|
▼ |
Cuando deseamos añadir un vídeo de You Tuve en Blogger solemos copiar el código que nos proporcionan y pegarlo en el lugar que deseamos mostrarlo, lo que algunos desconocen es que desde hace un par de meses los podemos añadir desde el mismo editor de entradas simplemente buscando el vídeo sin necesidad de salir del blog.
No olvidaremos que esta opción de insertar vídeos sólo está disponible si ingresamos al blog desde Blogger in draft porque de lo contrario no visualizamos el icono en la barra de herramientas.
Marcamos sobre el icono para insertar vídeos
Escogemos en las opciones de la izquierda si el vídeo ha sido subido por nosotros "Mis vídeos de You Tube" o "desde You Tube" si el vídeo no se encuentra en nuestra cuenta y a continuación ingresamos en el buscador el título o palabras clave para la localización.
Por defecto el vídeo que será añadido tiene unas medidas de width="320" para el ancho y height="266" el alto, podemos modificar esas medidas en Edición de HTML para mostrarlo en el tamaño deseado como hicimos en el siguiente ejemplo.
Prioritarios en Gmail |
|
▼ |
Rosa, de "El escaparate de Rosa" nos ha dejado |
|
▼ |
Siempre que me siento a escribir lo hago con ilusión como el que termina de completar un puzzle o el que da por finalizado un gran problema de matemáticas.
Hoy es distinto, hoy me siento vacía y con una gran tristeza por la noticia que muchos ya conocéis, Rosa Torre de "El escaparte de Rosa" nos ha dejado. Con su ausencia nos deja sumidos en la tristeza, la mente en blanco y unas ganas irrefrenables de parar el reloj para que este momento nunca hubiera llegado.
Conocí a Rosa hará en mayo siete años, no la conocía personalmente pero para tomar cariño a la gente no hace falta el contacto físico ni saber de su vida personal.
En una ocasión entré a su blog y vi una entrada que hablaba sobre banderitas, era un gadget que mostraba la banderita del país del visitante. Fui a dejarle un comentario pero solo me salían carcajadas porque mi última entrada de hacía unos minutos trataba de lo mismo. Le dije que viniera a mi blog y su comentario era más de lo mismo carcajadas por la coincidencia.
Mas de una vez me llamaron Rosa en los comentarios, yo se lo decía y ella se reía diciendo que le pasaba lo mismo al contrario.
Siempre he sentido admiración por Rosa, tenía y seguro que sigue teniendo una facilidad asombrosa para desenvolverse con los códigos. Era y seguirá siendo un referente en la blogosfera.
El reconocimiento y agradecimiento de la gente es el mejor recuerdo que puede tener y sin duda más que merecido.
Un comentario de Rosa en Twitter decía... ¡Somos aves noctámbulas eh Gem@!
Y lo seguiremos siendo Rosa, estemos donde estemos.
Generador CSS3 |
|
▼ |
CSS3 Generator nos permite obtener la previsualización de algunas de las propiedades más populares, nos ofrece el resultado en el panel de la derecha y en la parte inferior de la pantalla obtenemos el código listo para copiar y añadir en nuestra plantilla.
Las imágenes de los navegadores nos recuerdan que no todas las propiedades se visualizarán según el navegador que estamos utilizando y requiere el código para hacerlo compatible.
Slide con sombra |
|
▼ |
Lo prometido es deuda así que aquí va la forma de crear el slide con sombra que mostraba en la entrada anterior sobre diseños Bokeh.
Antes de comenzar debo aclarar que es conveniente alojar las imágenes en nuestro propio servidor y sustituir la url por la nuestra para evitar que en un futuro nuestro slide no muestre las imágenes por fallos de servidor.
Los scripts no tendremos problema ya que los añadiremos en la misma plantilla.
Nos situamos en plantilla edición de HTML y justo después de ]]></b:skin> añadimos los estilos que es el lugar donde más tarde podemos sustituir la url de las imágenes.
<style>
#preview_wrap {
margin-left-20px;
padding: 22px;
width: 520px;
height: 400px;
background: url(http://img50.xooimage.com/files/7/3/c/bg_preview-254fc87.gif) top left no-repeat;
}
#preview_outer {
overflow: hidden;
width: 520px;
height: 400px;
position: relative;
}
#preview_inner {
text-align: left;
height: 100%;
position: relative;
}
#preview_inner div {
float: left;
width: 550px;
height: 400px;
position: relative;
}
#preview_inner div a {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 470px;
text-indent: 20px;
padding: 20px 0;
color: #fff;
text-shadow: 5px 5px 5px #000000;
background: url(http://img49.xooimage.com/files/9/4/1/bg_trans-1ac2f94.png);
text-decoration: none;
font-size: 18px;
}
#thumbs {
padding-top: 30px;
position: relative;
width: 520px;
text-align: center;
}
#thumbs span {
padding: 12px;
width: 80px;
height: 80px;
cursor: pointer;
background: url(http://img27.xooimage.com/files/8/1/7/bg_thumb-1ac2fa9.gif) top left no-repeat;
display: inline-block;
}
#arrow {
position: absolute;
top: -13px;
background: url(http://img29.xooimage.com/files/7/1/e/bg_arrow-1ac2fc5.gif) top center no-repeat;
width: 104px;
height: 39px;
display: none;
}
</style>
Justo después añadimos jQuery, si lo hubiéramos añadido con anterioridad omitimos ese paso.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
A continuación añadimos el contenido de este archivo.
Y por último añadimos el HTML en un gadget de HTML/Javascript
<div id="preview_wrap">
<div id="preview_outer">
<div id="preview_inner">
<div><img src="imagen01.jpg" alt="" />
<a href="#">Texto 1</a></div>
<div><img src="imagen02.jpg" alt="" />
<a href="#">Texto 2</a></div>
<div><img src="imagen03.jpg" alt="" />
<a href="#">Texto 3</a></div>
<div><img src="imagen4.jp" alt="" />
<a href="#">Texto 4</a></div>
</div>
</div>
</div>
<div id="thumbs"><div id="arrow"></div>
<span><img src="miniatura01.jpg" alt="" /></span>
<span><img src="miniatura02.jpg" alt="" /></span>
<span><img src="miniatura03.jpg" alt="" /></span>
<span><img src="miniatura04.jpg" alt="" /></span>
</div>
Las imágenes grandes (imagen01,02,03,04) miden 475x430 y las miniaturas (miniatura01, 02, 03, 04) 80x80.
El tamaño del slide no se puede modificar a no ser que se crearan unas nuevas imágenes con sombra, eso nos llevaría también a crear las imágenes en miniatura y para la demo en el tamaño acorde con las imágenes del slide.
Imágenes Bokeh para fondo del blog |
|
▼ |
Siempre me han gustado las imágenes tipo Bokeh, hace tiempo mostraba una serie de sitios para descarga pero he descubierto un pack de 7 imágenes llenas de vida y color en ARSGRAFIK
El tamaño es de 1400 x 1400 píxeles pero podemos escalarlas para aplicar a nuestros diseños, o como fondo para el blog.
Ideas sobre diseños bokeh obtenidas en NALDZ GRAPHICS
Pictaculous extraer colores de una imagen |
|
▼ |
Pictaculous es una herramienta para extraer los colores de una imagen algo muy útil cuando se trata de diseñar o personalizar un sitio.
La imagen debe ser en formato PNG, JPEG o GIF. Si queremos podemos guardar nuestra paleta en archivo swatch para abrirla directamente en Photoshop.
También podemos acceder a la herramienta desde un dispositivo móvil, en ese caso buscamos la fotografía en el móvil, enviamos la imagen a colors@mailchimp.com y en pocos minutos nos proporcionará una paleta de colores.
Hotmail Adictos |
|
▼ |
Hotmail es el servicio de correo electrónico de Microsoft totalmente gratuito al que se puede acceder desde cualquier dispositivo con acceso a internet.
Para poder sacarle provecho a todas las herramientas implementadas por Windows Live Hotmail, se ha creado el portal llamado Hotmail Adictos.
En Hotmail adictos podemos encontrar todo lo necesario para familiarizarnos con nuestro correo, el sitio es actualizado a diario con novedades, trucos y tutoriales como por ejemplo la forma de Vincular cuentas Hotmail, desbloquear correo, generar respuesta automática, cambiar o recuperar contraseña, los posibles errores de iniciar sesión, recuperar contactos, la forma de eliminar la publicidad en la Web, Hotmail en tu móvil y como no, crear una cuenta de correo.
El diseño de Hotmail Adictos es claro y diáfano, está bien organizado y todo explicado con gran sencillez con la posibilidad de dejar comentarios algo estupendo para posibles dudas, por si eso fuera poco todo está en español.
Ya no tienes que dar más vueltas buscando respuesta a tus dudas, cualquier usuario de Hotmail interesado en conseguir el mayor rendimiento de su correo tiene en Hotmail Adictos la herramienta perfecta para estar al día con las últimas novedades. La suscripción es una buena forma de conseguirlo.
Flame pizarra virtual |
|
▼ |
Quizás con la practica se consiga algo más presentable pero por ahora el resultado salta a la vista, aún así es divertido pintar sobre esta pizarra virtual que nos ofrece Flame
REFERENCIA: Pazos Blogger
Patterns, imágenes de fondo para tus diseños |
|
▼ |
Menú colorido con CSS |
|
▼ |
Encontré este menú hace tiempo en algún sitio que no recuerdo y me llamó la atención por lo alegre que resulta y que está creado con CSS.
Da para jugar un rato y probar distintas gamas de colores o añadirle estilos distintos, incluso imagen de fondo en las pestañas.
Da para jugar un rato y probar distintas gamas de colores o añadirle estilos distintos, incluso imagen de fondo en las pestañas.
Los ejemplos tiene un tamaño reducido para poder mostrarlos en la entrada pero si seguimos los pasos nos proporcionará un menú como podemos ver aquí.
En plantilla Edicción de HTML añadimos los estilos justo antes de ]]></b:skin>
#middle {
width: 920px;
float:right;
padding:30px 10px 10px 10px;
margin:10px 0;
background:transparent url() no-repeat;
}
.category {
width:164px;
float:left;
border-top:8px solid #333;
margin:20px;
padding:5px 10px 10px 10px;
background:transparent;
}
.category p {
margin:0;
}
#cat-1 {width:164px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:164px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:164px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:164px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:164px; margin:0; border-top:8px solid #FFDD33; color:#000000;}
#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}
Una vez añadidos los estilos vamos a plantilla de diseño y editamos un nuevo gadget de HTML, en su interior añadimos lo siguiente:
<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='Enlace-1'>Enlace-1</a></h2>
</div></div></div>
<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='#'>Enlace-2</a></h2>
</div></div></div>
<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='#'>Enlace-3</a></h2>
</div></div></div>
<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='#'>Enlace-4</a></h2>
</div></div></div>
<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='#'>Enlace-5</a></h2>
</div></div></div></div>
❋ El menú está creado para cinco enlaces, para configurar esos enlaces editamos el gadget de HTML, buscamos la parte que dice:
<h2 class='title'><a href='#'>Enlace-1</a></h2>
Haremos la misma operación con los enlaces 2, 3, 4, 5.
❋ Enlace-1, 2, 3, 4 y 5 es el texto que visualizamos y hará las veces de enlace.
❋ La almohadilla # la sustituimos por la url del sitio que vamos a enlazar.
❋ La anchura del menú la podemos modificar en:
#middle {
width: 920px;
❋ El margen se muestra transparente, es decir que se mostrará como fondo el color del blog. Si deseamos que se muestre un color distinto lo podemos cambiar en:
#middle {
background:transparent url(aquí url de imagen optativa) no-repeat;
También podemos añadir una url de imagen.❋ Color de fondo en las pestañas
.category {
background: none repeat scroll 0 0 #5B0720;
❋ Para sustituir los colores de las pestañas por otros tendremos en cuenta que, #cat-1 y siguientes es el color de la línea superior que visualizamos. Ahí mismo podemos cambiar la anchura de las pestañas en width:164px.
❋ Donde #cat-1:hover y siguientes es el color de la pestaña cuando situamos el cursor sobre ella.
❋ El color del texto lo cambiaremos en
.category a
color:#ffffff;
❋ Igualmente cambiaremos el color de el texto cuando situamos el cursor sobre él en:
.category a:hover
color:#fff;
Parece complicado tanto cambio pero es cuestión de intentarlo.